<template>
  <div class="console">
    <div ref="chartRef" style="width: 1500px; height: 500px;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { getDlyInfo } from '@/api/dataInfo/flightInfo';

const chartRef = ref<HTMLElement | null>(null);
const airlineData = ref<Array<{ day: string; count: string }>>([]);

async function fetchData() {
  const response = await getDlyInfo();
  airlineData.value = response.data;

  // 获取新数据后，重新设置图表数据
  const chart = echarts.init(chartRef.value as HTMLDivElement);
  const option = {
    title: {
      text: '延期航班数量分布',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
      formatter: '延期航班数量: {c}',
    },
    xAxis: {
      type: 'category',
      data: airlineData.value.map((item) => item.day),
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '延期航班数量',
        data: airlineData.value.map((item) => parseInt(item.count)),
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置
          formatter: '{c}', // 标签内容，这里是航班数量
        },
      },
    ],
  };

  chart.setOption(option);
}

onMounted(fetchData);
</script>
